<template>
  <div>
    <el-form
      ref="queryRef"
      v-loading="loading"
      :inline="true"
      :model="listQuery"
    >
      <el-form-item label="年度" prop="year">
        <el-select v-model="listQuery.year" placeholder="请选择年度" clearable style="width: 180px">
          <el-option
            v-for="item in yearList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称/标准编号/标准名称" prop="nameOrCode">
        <el-input v-model="listQuery.nameOrCode" placeholder="请输入项目名称/标准编号/标准名称" style="width: 180px" clearable />
      </el-form-item>
      <el-form-item label="项目资料负责人" prop="leader">
        <el-input v-model="listQuery.leader" placeholder="请输入项目资料负责人" style="width: 180px" clearable />
      </el-form-item>
      <el-form-item class="anniu">
        <el-button type="primary" @click="handleQuery()">查询</el-button>
        <el-button @click="resetQuery()">重置</el-button>
      </el-form-item>
    </el-form>
    [{{ props.type }}]
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      element-loading-background="rgba(0, 0, 0, 0.5)"
      element-loading-text="加载中..."
      header-row-class-name="table-header"
    >
      <el-table-column type="index" label="序号" align="center" width="80">
        <template #default="scope">
          {{ (tableQuery.page - 1) * tableQuery.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="year" label="年度" align="center" width="150"></el-table-column>
      <el-table-column prop="col0" label="项目编号" align="center" width="150"></el-table-column>
      <el-table-column prop="col1" label="项目名称" align="center" width="150"></el-table-column>
      <el-table-column prop="col2" label="标准编号" align="center" width="150"></el-table-column>
      <el-table-column prop="col3" label="标准名称" align="center" width="150"></el-table-column>
      <el-table-column prop="col4" label="项目资料负责人登录账号" align="center" width="120">
        <template #default="scope">
          <el-input v-if="scope.row.editable" v-model="scope.row.col4"></el-input>
          <span v-else>{{ scope.row.col4 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="col5" label="项目资料负责人登录密码" align="center" width="120">
        <template #default="scope">
          <el-input type="password" v-if="scope.row.editable" v-model="scope.row.col5"></el-input>
          <span v-else>{{ scope.row.col5 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="col6" label="项目资料负责人姓名" align="center" width="120">
        <template #default="scope">
          <el-input v-if="scope.row.editable" v-model="scope.row.col6"></el-input>
          <span v-else>{{ scope.row.col6 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="col7" label="项目资料负责人手机号" align="center" width="120">
        <template #default="scope">
          <el-input v-if="scope.row.editable" v-model="scope.row.col7"></el-input>
          <span v-else>{{ scope.row.col7 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="col8" label="项目资料负责人身份证号" align="center" width="170">
        <template #default="scope">
          <el-input v-if="scope.row.editable" v-model="scope.row.col8"></el-input>
          <span v-else>{{ scope.row.col8 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="col9" label="账号有效截止时间" align="center" width="120">
        <template #default="scope">
          <el-date-picker
            v-if="scope.row.editable"
            v-model="scope.row.col9"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
          <span v-else>{{ scope.row.col9 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template #default="scope">
          <el-button v-if="!scope.row.editable" type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
          <el-button v-else type="text" size="small" @click="saveRow(scope.row)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableQuery.total > 0"
      class="pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableQuery.total"
      :page-size="tableQuery.pageSize"
      :current-page.sync="tableQuery.page"
      @size-change="tableQuery.pageSize = $event; handlePagination()"
      @current-change="tableQuery.page = $event; handlePagination()"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { useRoute } from 'vue-router';
const route = useRoute();
const userStore = useUserStore();

const props = defineProps({
	companyId: {
		type: String,
		default: ''
	},
  type: {
    type: String,
    default: 'standard' // standard | foresight | review
  }
});

watch(() => props.companyId, (newVal) => {
  if (newVal) {
    fetchData();
  }
});

const yearList = ref<any[]>([]);
const tableQuery = reactive({
    page: 1,
    pageSize: 10,
    total: 22,
});
const listQuery = reactive({
    year: '',
    nameOrCode: '',
    leader: '',
})
const tableData = ref<any[]>([
    { id: 1, year: '2024', },
    { id: 2, year: '2024', },
    { id: 3, year: '2024', },
    { id: 4, year: '2024', },
    { id: 5, year: '2024', },
    { id: 6, year: '2024', },
    { id: 7, year: '2024', },
    { id: 8, year: '2024', },
    { id: 9, year: '2023', },
    { id: 10, year: '2023', }
]);

const handlePagination = () => {
  fetchData();
}
const handleQuery = () => {
  tableQuery.page = 1
  tableQuery.pageSize = 10
  fetchData();
}
const resetQuery = () => {
  listQuery.year = ''
  listQuery.nameOrCode = ''
  listQuery.leader = ''
  tableQuery.page = 1
  tableQuery.pageSize = 10
  fetchData();
}
const fetchData = () => {
  const payload = {
    companyId: props.companyId,
    ...listQuery,
    ...tableQuery,
  };
  console.log('fetching data', payload);
  setTimeout(() => {
  }, 500)
}
const editRow = (row: any) => {
  row.editable = true
}
const saveRow = (row: any) => {
  row.editable = false
  console.log('saveRow', row)
}

const initData = () => {
  const currentYear = new Date().getFullYear();
  for (let i = currentYear; i >= currentYear - 10; i--) {
    yearList.value.push({ label: `${i}年`, value: `${i}` });
  }
  fetchData();
}

onMounted(() => {
  initData();
});

</script>